<template>
  <view class="add-phrase-container">
    <!-- 文本框 -->
    <view class="input-container">
      <textarea
        class="input"
        placeholder="输入您的常用回复，请不要填写QQ、微信等联系方式或广告信息，否则系统将封禁您的账户"
        v-model="newPhrase"
        maxlength="200"
      ></textarea>
    </view>

    <!-- 完成按钮 -->
    <view class="button-container">
      <button class="complete-button" @click="handleComplete">完成</button>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      newPhrase: '' // 新常用语内容
    };
  },
  methods: {
    // 点击完成按钮
    handleComplete() {
      if (this.newPhrase.trim() === '') {
        uni.showToast({
          title: '请输入常用语',
          icon: 'none'
        });
        return;
      }

      // 将新常用语传递回聊天页面
      const pages = getCurrentPages();
      const prevPage = pages[pages.length - 2]; // 获取上一页实例
      if (prevPage && prevPage.$vm) {
        prevPage.$vm.phrases.push(this.newPhrase); // 将新常用语添加到上一页的常用语列表
      }

      uni.navigateBack(); // 返回上一页
    }
  }
};
</script>

<style scoped>
.add-phrase-container {
  display: flex;
  flex-direction: column;
  height: 100vh;
  padding: 20rpx;
  background-color: #fff;
}

.input-container {
  flex: 1;
  background-color: #fff;
  border-radius: 10rpx;
  padding: 20rpx;
}

.input {
  width: 100%;
  font-size: 28rpx;
  line-height: 1.5;
  min-height: 80rpx;
  padding-top: 20rpx;
}

.button-container {
  padding: 20rpx;
  background-color: #fff;
}

.complete-button {
 width: 100%;
 		height: 80rpx;
 		line-height: 80rpx;
     background: linear-gradient(90deg, #9A9AFF 0%, #D6D6FE 100%);
   	border-radius: 32px;
 		font-size: 32rpx;
 		color: #fff;
 		text-align: center;
 		pointer-events: auto; /* 确保用户交互正常 */
}

.complete-button::after {
  border: none;
}
</style>